<template>
    <div>
      <el-carousel :interval="4000" type="card" height="320px">
        <el-carousel-item v-for="item in img_list" :key="item">
          <img :src="item" alt="" style="height: 100%;width: 100%">
        </el-carousel-item>
      </el-carousel>
      <div style="width: 200px">
        <el-row>
          <el-col span="16">
            <h2>本周强推</h2>
          </el-col>
          <el-col span="8">
            <h4 style="margin-top: 32px">总共22本</h4>
          </el-col>
        </el-row>
      </div>
      <hr>
      <el-row>
        <el-col span="8" style="background: #f7f5f0;height: 540px">
          <div style="height: 84px;width: 180px;margin-left: 200px">
            <el-carousel :interval="4000" type="card" height="120px">
              <el-carousel-item v-for="item in tableData" :key="item">
                <img :src="item.cover" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-row style="margin-top: 100px">
            <el-col span="7">
              <div style="">
                <h3>诸天谍影</h3>
                <div >兴霸天</div><br>
                <div>5000人气</div><br>
                <div>三年之后又三年，我快成轮回者老大了喂！</div><br>
                <el-button type="danger" round size="small">书籍详情</el-button>
              </div>
            </el-col>
            <el-col span="1">
              <div style="float:left;margin-top: 30px;width: 1px;height: 200px; background: darkgray;"></div>
            </el-col>
            <el-col span="7">
              <div style="">
                <h3>蔚蓝星途</h3>
                <div >虚伪王庭</div><br>
                <div>2000人气</div><br>
                <div>当文明覆灭后，新的文明将会在废墟中崛起。</div><br>
                <el-button type="danger" round size="small">书籍详情</el-button>
              </div>
            </el-col>
            <el-col span="1">
              <div style="float:left;margin-top: 30px;width: 1px;height: 200px; background: darkgray;"></div>
            </el-col>
            <el-col span="8">
              <div style="">
                <h3>传奇1997</h3>
                <div >狂花非叶</div><br>
                <div>1250人气</div><br>
                <div>一样的重生，不一样的1997，从这一年开始，隋波的传奇开始了……</div><br>
                <el-button type="danger" round size="small">书籍详情</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col span="16" style="background: #ffffff;height: 540px">
            <el-row>
              <el-col span="8" v-for="item in bang_1":key="item.id">
                <el-row>
                  <el-col span="8">
                    <img :src="item.cover" style="margin-top: 20px;width: 90px;height: 120px">
                  </el-col>
                  <el-col span="16">
                    <h4 style="margin-left: -180px">{{item.title}}</h4>
                    <div style="font-size: 12px" align="left">{{item.abs}}</div><br>
                    <el-row>
                      <el-col span="4">
                        <img src="https://qidian.gtimg.com/qd/images/ico/user.f22d3.png">
                      </el-col>
                      <el-col span="6">
                        <div style="font-size: 12px;margin-top: 10px;margin-left: -15px">{{item.author}}</div>
                      </el-col>
                      <el-col span="8">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #a6a6a6;border: 1px solid #bfbfbf;margin-top: 5px">{{item.type}}</div>
                      </el-col>
                      <el-col span="6">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #bf2c24;border: 1px solid #df9591;margin-top: 5px">人气畅销</div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
              <div><hr style="border:1px solid #CCC"></div>
              <el-col span="8" v-for="item in bang_2":key="item.id">
                <el-row>
                  <el-col span="8">
                    <img :src="item.cover" style="margin-top: 20px;width: 90px;height: 120px">
                  </el-col>
                  <el-col span="16">
                    <h4 style="margin-left: -180px">{{item.title}}</h4>
                    <div style="font-size: 12px" align="left">{{item.abs}}</div><br>
                    <el-row>
                      <el-col span="4">
                        <img src="https://qidian.gtimg.com/qd/images/ico/user.f22d3.png">
                      </el-col>
                      <el-col span="6">
                        <div style="font-size: 12px;margin-top: 10px;margin-left: -15px">{{item.author}}</div>
                      </el-col>
                      <el-col span="8">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #a6a6a6;border: 1px solid #bfbfbf;margin-top: 5px">{{item.type}}</div>
                      </el-col>
                      <el-col span="6">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #bf2c24;border: 1px solid #df9591;margin-top: 5px">人气畅销</div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
              <div>&nbsp<hr style="border:1px solid #CCC"></div>
              <el-col span="8" v-for="item in bang_3":key="item.id">
                <el-row>
                  <el-col span="8">
                    <img :src="item.cover" style="margin-top: 20px;width: 90px;height: 120px">
                  </el-col>
                  <el-col span="16">
                    <h4 style="margin-left: -180px">{{item.title}}</h4>
                    <div style="font-size: 12px" align="left">{{item.abs}}</div><br>
                    <el-row>
                      <el-col span="4">
                        <img src="https://qidian.gtimg.com/qd/images/ico/user.f22d3.png">
                      </el-col>
                      <el-col span="6">
                        <div style="font-size: 12px;margin-top: 10px;margin-left: -15px">{{item.author}}</div>
                      </el-col>
                      <el-col span="8">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #a6a6a6;border: 1px solid #bfbfbf;margin-top: 5px">{{item.type}}</div>
                      </el-col>
                      <el-col span="6">
                        <div style="font-size:15px;max-width: 60px;height: 18px;color: #bf2c24;border: 1px solid #df9591;margin-top: 5px">人气畅销</div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
        </el-col>
      </el-row>
      <div style="height: 200px;background: #fafafa">
        <el-col span="6">
          <br>
        </el-col>
        <el-col span="12">
          <div align="left" style="font-size: 12px;margin-top: 20px">中国网警提示：网络刷单是违法 切莫轻信有返利，网上交友套路多 卖惨要钱需当心，电子红包莫轻点 个人信息勿填写，仿冒客服来行骗 官方核实最重要，招工诈骗有套路 预交费用需谨慎，低价充值莫轻信 莫因游戏陷套路，连接WIFI要规范 确认安全再连接，抢购车票有章法 确认订单再付款，白条赊购慎使用 提升额度莫轻信，网购预付有风险 正规渠道很重要 如网民接到962110电话，请立即接听。</div>
          <br>
          <div style="font-size: 12px"><el-link :underline="false">关于我们&nbsp&nbsp&nbsp</el-link><el-link :underline="false">联系我们&nbsp&nbsp&nbsp</el-link><el-link :underline="false">加入我们&nbsp&nbsp&nbsp</el-link><el-link :underline="false">帮助我们&nbsp&nbsp&nbsp</el-link><el-link :underline="false">举报中心&nbsp&nbsp&nbsp</el-link></div>
          <br>
          <div style="font-size: 12px;color: #a6a6a6">Copyright © 2019-2020 www.xxxxx.com All Rights Reserved版权所有 xxxx娱乐信息科技有限公司</div>
          <br>
          <i class="el-icon-s-promotion" style="font-size: 30px"></i>
          <i class="el-icon-message" style="font-size: 30px;margin-left: 30px"></i>
          <i class="el-icon-chat-line-round" style="font-size: 30px;margin-left: 30px"></i>
        </el-col>
        <el-col span="6">
          <br>
        </el-col>
     </div>
    </div>
</template>

<script>
export default {
  name: 'Book',
  data () {
    return{
      img_list: ['https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/7a252584150962528ae3c5ebec79d879.jpeg',
        'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/6806bbc2f968b45d18636f96216727af.jpg',
        'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/183b3d525d8bf40503bfb10cee617158.jpg',
        'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/8ff3822123a434d849ee9fa904b15dad.jpg'],
      tableData: [{
        id: '1',
        cover: 'https://bookcover.yuewen.com/qdbimg/349573/1015744831/90'
      },{
        id: '2',
        cover: 'https://bookcover.yuewen.com/qdbimg/349573/1017278229/90'
      },{
        id: '3',
        cover: 'https://bookcover.yuewen.com/qdbimg/349573/1019108956/90'
      }],
      bang_1: [{
        id: '1',
        title: '活着',
        author: '余华',
        abs: '福贵本是个阔少爷，可他嗜赌如命，终于赌光了家业，一贫如洗。他的父亲被他活活气死，母亲则在穷困中患了重病，福贵..',
        cover: 'https://img3.doubanio.com/view/subject/s/public/s29053580.jpg',
        resource: '#',
        type: '生活文学'
      },{
        id: '2',
        title: '解忧杂货铺',
        author: '[日]东野圭吾',
        abs: '僻静的街道旁有一家杂货店，只要写下烦恼投进卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。 因男友身患绝...',
        cover: 'https://img3.doubanio.com/view/subject/s/public/s27264181.jpg',
        resource: '',
        type: '生活文学'
      },{
        id: '3',
        title: '追风筝的人',
        author: '[美]卡勒德',
        abs: '12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足。然而，在一场风筝比赛后，发生了一件悲惨不堪的事...',
        cover: 'https://img3.doubanio.com/view/subject/s/public/s1727290.jpg',
        resource: '',
        type: '生活文学'
      }],
      bang_2: [{
        id: '1',
        title: '三体',
        author: '刘慈欣',
        abs: '文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划红岸工程取得了突破性进展。但在按下发射键的那一刻，世界开始改变...',
        cover: 'https://img1.doubanio.com/view/subject/s/public/s2768378.jpg',
        resource: '#',
        type: '科幻小说'
      },{
        id: '2',
        title: '穿梭诸天的军火狂人',
        author: '秀山大飞',
        abs: '穿梭诸天的军火',
        cover: 'https://bookcover.yuewen.com/qdbimg/349573/1018296955/150',
        resource: '',
        type: '科幻小说'
      },{
        id: '3',
        title: '病毒星球',
        author: '[美]卡尔·齐默',
        abs: '★69%的人携带了一种致癌病毒，当事人却不知道。★人类在本质上不过是一堆不断混合、闪...',
        cover: 'https://img9.doubanio.com/view/subject/s/public/s32294606.jpg',
        resource: '',
        type: '科幻小说'
      }],
      bang_3: [{
        id: '1',
        title: '三国演义',
        author: '[明] 罗贯中',
        abs: '《三国演义》又名《三国志演义》、《三国志通俗演义》，是我国小说史上最著名最杰出的长篇章回体历史小说。 《三国演义》的作者是元末明初人罗贯中，由毛纶，毛宗岗父...',
        cover: 'https://img3.doubanio.com/view/subject/s/public/s1076932.jpg',
        resource: '#',
        type: '历史小说'
      },{
        id: '2',
        title: '明朝那些事儿',
        author: '当年明月',
        abs: '从朱元璋的出身开始写起，到永乐大帝夺位的靖难之役结束为止。叙述了明朝最艰苦卓绝的开国过程。朱元璋pk陈友谅，谁堪问鼎天下？战太平、太湖大决战。卧榻之侧埋恶虎...',
        cover: 'https://img3.doubanio.com/view/subject/s/public/s1872653.jpg',
        resource: '',
        type: '历史小说'
      },{
        id: '3',
        title: '中国历代政治得失',
        author: '钱穆',
        abs: '《中国历代政治得失》为作者的专题演讲合集，分别就中国汉、唐、宋、明、清五代的政府组织、百官职权、考试监察、财经赋税、兵役义务等种种政治制度作了提要勾玄的概观...',
        cover: 'https://img9.doubanio.com/view/subject/s/public/s1319205.jpg',
        resource: '',
        type: '历史小说'
      }]
    }
  }
}
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 400px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 200px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
